import { SmileTwoTone, HeartTwoTone, CheckCircleTwoTone } from '@ant-design/icons';
import { Button, Card, Col, Flex, Progress, Row, Space, Statistic, StatisticProps, Table, Tabs, TabsProps, Tag } from 'antd';
import React from 'react'; import CountUp from 'react-countup';
import styles from "./index.module.scss";
import Chart1 from './componetns/chart1';
import Chart2 from './componetns/chart2';
import Chart3 from './componetns/chart3';

const formatter: StatisticProps['formatter'] = (value) => (
    <CountUp end={value as number} separator="," />
);

const icons = [
    <SmileTwoTone style={{ fontSize: 50 }} />,
    <HeartTwoTone style={{ fontSize: 50 }} twoToneColor="#eb2f96" />,
    <CheckCircleTwoTone style={{ fontSize: 50 }} twoToneColor="#52c41a" />
]

const items: TabsProps['items'] = [
    {
        key: '1',
        label: '流量趋势',
        children: <Chart1 />,
    },
    {
        key: '2',
        label: '访问量趋势',
        children: <Chart2 />,
    }
];

const tableData = [
    {
        id: 0,
        name: '商品名称1',
        start: '2022-02-02',
        end: '2022-02-02',
        prograss: '100',
        status: '已完成',
    },
    {
        id: 1,
        name: '商品名称2',
        start: '2022-02-02',
        end: '2022-02-02',
        prograss: '50',
        status: '交易中',
    },
    {
        id: 2,
        name: '商品名称3',
        start: '2022-02-02',
        end: '2022-02-02',
        prograss: '100',
        status: '已完成',
    },
]

const columns = [
    {
        title: '商品名称',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '开始时间',
        dataIndex: 'start',
        key: 'start',
    },
    {
        title: '结束时间',
        dataIndex: 'end',
        key: 'end',
    },
    {
        title: '进度',
        dataIndex: 'prograss',
        key: 'id',
        render: (text: string) => {
            return <Progress type="circle" percent={parseInt(text)} size={30} />
        }
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'id',
        render: (text: string) => {
            return <Tag color={text === '已完成' ? 'success' : 'processing'}>{text}</Tag>
        }
    },
]

const Monitor: React.FC = () => {
    const onChange = (key: string) => {
    };

    return (
        <div className={`${styles.container} box_container`}>
            <Space direction="vertical" size={10} style={{ display: "flex", flexGrow: 1 }}>
                <Row gutter={[10, 0]}>
                    {
                        [1, 2, 3, 4].map((_, ind) => {
                            return <Col span={6} key={ind}>
                                <Card>
                                    <Space direction="vertical" size={10} style={{ display: "flex", flexGrow: 1 }}>

                                        <Flex justify={'space-between'} align={'center'}>
                                            <Statistic title={`data${ind + 1}`} value={Math.random() * 100000} formatter={formatter} />
                                            {
                                                icons[Math.random() * icons.length | 0]
                                            }
                                        </Flex>
                                        <Flex justify={'space-between'} align={'baseline'}>
                                            <div>累计数据{ind + 1}</div>
                                            <Statistic
                                                valueStyle={{ fontSize: '16px' }} value={Math.random() * 999999} formatter={formatter} />
                                        </Flex>
                                    </Space>
                                </Card>
                            </Col>
                        })
                    }
                </Row>
                <Row>
                    <Col span={24}>
                        <Card>
                            <Tabs animated={{ inkBar: false, tabPane: true }} defaultActiveKey="1" items={items} onChange={onChange} />
                        </Card>
                    </Col>
                </Row>
                <Row gutter={[10, 0]}>
                    <Col span={10}>
                        <Card title="数据统计" >
                            <Chart3 />
                        </Card>
                    </Col>
                    <Col span={14}>
                        <Card title="成交记录" extra={<Button type="link" className='more-btn'>更多</Button>}>
                            <Table dataSource={tableData} columns={columns} pagination={false} rowKey={record => record.id}></Table>
                        </Card>
                    </Col>
                </Row>
            </Space>
        </div>
    )
}

export default Monitor;